<template>
	<!--index.wxml-->
	<view :data-weui-theme="theme">
	  <button class="avatar-wrapper" open-type="chooseAvatar"   @chooseavatar="onChooseAvatar">
	    <image class="avatar" :src="wxuserinfo.headimgurl"></image>
	  </button> 
	  <form catchsubmit="formSubmit">
	    <view class="row">
	      <view class="text1">昵称：</view>
	        <input type="nickname" v-model="wxuserinfo.nickname" class="weui-input" name="nickname" placeholder="请输入昵称"/>
	    </view>
	    <button type="primary" @click="formSubmit" style="margin-top: 40rpx;margin-bottom: 20rpx;background-color: #00A1A9;" form-type="submit">提交</button>
	  </form>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				wxuserinfo:{
					headimgurl:"https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0",
					nickname:"明一美优然会员"
				},
				theme: uni.getSystemInfoSync().theme,
			}
		},
		onLoad() {
		    uni.onThemeChange((result) => {
		      this.setData({
		        theme: result.theme
		      })
		    })
		    var uu=uni.getStorageSync('wxuserinfo')
		    if(uu){
				this.wxuserinfo=uu;
		    }
		  },
		
		methods: {
			 onChooseAvatar(e) {
				const { avatarUrl } = e.detail 
				var wxuserinfo=this.wxuserinfo
				wxuserinfo.headimgurl=avatarUrl
				this.wxuserinfo=wxuserinfo
				this.avatarUrl=avatarUrl
				uni.setStorageSync('wxuserinfo',wxuserinfo)
			  },
			  formSubmit(e){
				  console.log(e)
			  	  var wxuserinfo=this.wxuserinfo
			  	  uni.setStorageSync('wxuserinfo',wxuserinfo)
			  	  var user_id=wx.getStorageSync('user_id')
			  	  var _this = this
			  	  var rq={}
			  	  rq.headimgurl=wxuserinfo.headimgurl;
			  	  rq.nickname=wxuserinfo.nickname;
			  	  rq.user_id=user_id;
			  	  this.request('/api/index/update_basic_info', rq,"post").then(data => {
			  		 uni.navigateBack()
			  	  })
			  },
			  
		}
	}
</script>

<style>
/* index.wxss  参考 */ 
.avatar-wrapper {
    padding: 0;
    width: 86px !important;
    border-radius: 8px;
    margin-top: 40px;
    margin-bottom: 40px;
    background-color: #fff;
  }
  
  .avatar {
    display: block;
    width: 86px;
    height: 86px;
  }
  
  .container {
    display: flex;
  }
  .row{
     border-bottom: 1px solid #eee;
     display: flex;
     align-items: center;
     height: 80rpx;
     padding-left: 20rpx;
     width: 80%;
     margin: 0 auto;
  }
  .text1{
      flex: 2;
  }
  .weui-input{
      flex: 6;
  }
  
</style>
